
<template>
  <div class="app">
  <el-button @click="changeFlag">{{ flag ? '切换到注册' : '切换到登录' }}</el-button>
  <div v-if="flag"><Denlu /></div>
  <div v-else><Zhuce /></div>
  <el-button type="primary" :disable="flag" plain round>主要按钮</el-button>
</div>
</template>
<script setup>
import { ref } from 'vue';
import Zhuce from '@/components/work/Reg.vue';
import Denlu from '@/components/work/Login.vue';

const flag = ref(true);

function changeFlag() {
flag.value = !flag.value;
}
</script>

<style scoped>
.app {
text-align: center;
padding: 30px;
height: 200vh; /* 设置高度为视口高度 */
box-sizing: border-box; /* 确保内边距和边框不会增加元素的总宽度和高度 */
/* border: 1px solid red; */
}

button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
margin-bottom: 20px;
}

</style>


